<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
    <%@include file="/WEB-INF/include-head.jsp" %>
    <link rel="stylesheet" href="ztree/zTreeStyle.css"/>
    <script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript" src="crowd/my-role.js"></script>
    <%--引入添加页面--%>
    <%@include file="/WEB-INF/modal-role-add.jsp" %>
    <%--引入修改页面--%>
    <%@include file="/WEB-INF/modal-role-edit.jsp" %>
    <%--删除页面--%>
    <%@include file="/WEB-INF/modal-role-confirm.jsp" %>
    <%--添加权限页面--%>
    <%@include file="/WEB-INF/modal-role-assign-auth.jsp" %>


    <script>
        $(function () {
            window.pageNum = 1;
            window.pageSize = 5;
            window.keyword = "";
            //调用函数显示数据以及分页数据
            generatePage();

            //给查询按钮添加点击响应函数
            $("#searchBtn").click(function () {
                //1.获取搜索数据
                window.keyword = $("#keywordInput").val();
                //重新刷新页面
                generatePage();
            })

            //点击新增弹出模拟框
            $("#showAddModalBtn").click(function () {
                $('#addModal').modal('show');
            })

            //点击保存请求保存
            $('#saveRoleBtn').click(function () {
                var roleName = $.trim($('#addModal [name=roleName]').val());
                $.ajax({
                    "url": "role/save.json",
                    "type": "post",
                    "data": {
                        "name": roleName
                    },
                    "dataType": "json",
                    "success": function (response) {

                        var result = response.result;

                        if (result == "SUCCESS") {
                            layer.msg("操作成功！");

                            // 将页码定位到最后一页
                            window.pageNum = 99999999;

                            // 重新加载分页数据
                            generatePage();
                        }

                        if (result == "FAILED") {
                            layer.msg("操作失败！" + response.message);
                        }

                    },
                    "error": function (response) {
                        layer.msg('添加失败,名字重复');
                    }
                });
                //关闭模态框
                $('#addModal').modal('hide');
                //清理模态框
                $('#addModal [name=roleName]').val("");

                //重新加载分页数据,定位到最后一页
                window.pageNum = 999999;
                generatePage();
            })

            // 给铅笔修改按钮绑定相应事件
            $("#rolePageBody").on("click", ".pencilBtn", function () {
                // 打开模态框
                $('#editModal').modal("show");
                // 获取当前角色的名称
                var roleName = $(this).parent().prev().text();


                // 获取当前据角色的id
                window.roleId = this.id;

                // 使用roleName设置为模拟框中文本框
                $('#editModal [name=roleName]').val(roleName);

            })

            // 给更新模态框中的更新按钮绑定单击响应函数
            $("#updateRoleBtn").click(function () {
                // 获取文本框获取新的角色名称
                var roleName = $('#editModal [name=roleName]').val();

                console.log(roleName);

                // 发送ajax请求执行更新
                $.ajax({
                    url: "role/update.json",
                    type: "post",
                    data: {
                        "id": window.roleId,
                        "name": roleName
                    },
                    dataType: "json",
                    success: function (response) {
                        var result = response.result;
                        layer.msg("操作成功")
                        // 重新加载分页
                        generatePage();
                        if (result == "FAILED") {
                            layer.msg("操作失败");
                        }
                    },
                    error: function (response) {
                        layer.msg("修改失败：请重试")
                    }

                })

                $('#editModal').modal('hide');
            })

            // 给单条删除按钮添加上事件
            $('#rolePageBody').on('click', '.removeBtn', function () {
                // 获取角色名称
                var roleName = $(this).parent().prev().text();
                // 创建role对象存入数组
                var roleArray = [{
                    roleId: this.id,
                    roleName: roleName
                }]

                // 调用函数打开模拟框
                showConfirmModal(roleArray);

            })

            // 给确认删除绑定事件
            $('#removeRoleBtn').click(function () {
                var requestBody = JSON.stringify(window.roleIdArray);

                // 发送Ajax请求去删除数据
                $.ajax({
                    url: "role/remove/by/role/id/array.json",
                    type: "post",
                    data: requestBody,
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",

                    // 成功
                    success: function (response) {
                        var result = response.result;
                        if (result == "SUCCESS") {
                            layer.msg("删除成功");
                            // 成功刷新页面
                            generatePage();
                        }
                        if (result == "FAILED") {
                            layer.msg("操作失败！" + response.message);
                        }
                    },
                    error: function (response) {
                        layer.msg("操作失败" + response.status + " " + response.statusText);
                    }
                })

                // 关闭模拟框
                $('#confirmModal').modal('hide');

            })

            // 给总的checkBox绑定单击相应函数,让他与下面的状态一致
            $('#summaryBox').click(function () {
                // 获取当前多选框自身的状态
                var currentStatus = this.checked;
                // 使用当前状态设置其他多选框状态
                $('.itemBox').prop("checked", currentStatus);

            })

            // 全选,全不选反向操作
            $('#rolePageBody').on('click', '.itemBox', function () {
                // 获取当前已经选中.itemBox的数量
                var checkedBoxCount = $('.itemBox:checked').length;
                // 获取全部的.itemBox的数量
                var totalBoxCount = $('.itemBox').length;

                // 如果数量一样就选中,不一样就不选中
                $('#summaryBox').prop('checked', checkedBoxCount == totalBoxCount);


            })

            // 给批量删除的按钮绑定单击响应事件
            $('#batchRemoveBtn').click(function () {

                // 创建数据对象
                var roleArray = [];
                // 遍历当前选中的多选框
                $('.itemBox:checked').each(function () {
                    // 使用this引用当前遍历的到的多选框
                    var roleId = this.id;

                    // 通过DOM获取角色的名称
                    var roleName = $(this).parent().next().text();

                    // 集合中添加role对象的id和name属性
                    roleArray.push({
                        "roleId": roleId,
                        "roleName": roleName
                    });
                })

                // 检查roleArray长度是否为0
                if (roleArray.length == 0) {
                    layer.msg("请至少选择一个执行删除");
                    return;
                }

                // 调用专门的函数打开模态框
                showConfirmModal(roleArray);


            })

            // 给分配权限绑定单击响应函数
            $('#rolePageBody').on('click', '.checkBtn', function () {
                // 把当前角色id存入全局变量
                window.roleId = this.id;
                // 打开模态框
                $('#assignModal').modal('show');
                fillAuthTree();
            })

            // 给确定执行分配添加响应事件,发送请求
            $('#assignBtn').click(function () {
                // 声明一个专门的数组存放id
                var authIdArray = [];

                // 获取zTreeObk对象,authTreeDemo为生成节点的id
                var zTreeObj = $.fn.zTree.getZTreeObj("authTreeDemo")

                // 获取全部被勾选的节点
                var checkedNodes = zTreeObj.getCheckedNodes();

                // 遍历勾选的节点,取出id存入id数组
                for (var i = 0; i < checkedNodes.length; i++) {
                    var checkedNode = checkedNodes[i];
                    var authId = checkedNode.id;
                    authIdArray.push(authId);
                }

                // 发送请求保存请求执行分配
                var requestBody = {
                    "authIdArray": authIdArray,
                    // 为了服务器端 handler 方法能够统一使用 List<Integer>方式接收数据，roleId 也存 入数组
                    "roleId": [window.roleId]
                };
                // 转换成JSON
                requestBody = JSON.stringify(requestBody);
WE
                // 发送请求去保存角色
                $.ajax({
                    url: "assign/do/role/assign/auth.json",
                    type: "post",
                    data: requestBody,
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (response) {
                        var result = response.result;
                        if (result == "SUCCESS") {
                            layer.msg("操作成功！");
                        }
                        if (result == "FAILED") {
                            layer.msg("操作失败！" + response.message);
                        }
                    },
                    error: function (response) {
                        layer.msg("操作成功!" + response.status + " " + response.statusText);
                    }
                });

                $('#assignModal').modal('hide');


            })
        });

    </script>


    <body>
        <%@include file="/WEB-INF/include-nav.jsp" %>

        <div class="container-fluid">
            <div class="row">
                <%@include file="/WEB-INF/include-sidebar.jsp" %>
                <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                        </div>
                        <div class="panel-body">
                            <form class="form-inline" role="form" style="float:left;">
                                <div class="form-group has-feedback">
                                    <div class="input-group">
                                        <div class="input-group-addon">查询条件</div>
                                        <input id="keywordInput" class="form-control has-success" type="text"
                                               placeholder="请输入查询条件">
                                    </div>
                                </div>
                                <button id="searchBtn" type="button" class="btn btn-warning">
                                    <i class="glyphicon glyphicon-search"></i>查询
                                </button>
                            </form>
                            <button id="batchRemoveBtn" type="button" class="btn btn-danger"
                                    style="float:right;margin-left:10px;">
                                <i class=" glyphicon glyphicon-remove"></i> 删除
                            </button>
                            <button id="showAddModalBtn" type="button" class="btn btn-primary" style="float:right;">
                                <i class="glyphicon glyphicon-plus"></i>新增
                            </button>
                            <br>
                            <hr style="clear:both;">
                            <div class="table-responsive">
                                <table class="table  table-bordered">
                                    <thead>
                                        <tr>
                                            <th width="30">#</th>
                                            <th width="30"><input id="summaryBox" type="checkbox"></th>
                                            <th>名称</th>
                                            <th width="100">操作</th>
                                        </tr>
                                    </thead>

                                    <tbody id="rolePageBody"></tbody>

                                    <tfoot>
                                        <tr>
                                            <td colspan="6" align="center">
                                                <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                                            </td>
                                        </tr>

                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        </div>
    </body>
</html>


